<template>
    <el-dialog
      v-model="dialogVisible"
      :destroy-on-close="true"
      :align-center="true"
      width="40%"
      title="议价"
      style="padding: 20px"
    >
      <el-form
        ref="jobFormRef"
        :rules="rules"
        :model="dialogData.itemInfo"
        label-width="100px"
        label-suffix=" :"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请人报价">
              <el-input
                v-model="dialogData.itemInfo.quoteAmt"
                placeholder="申请人报价"
                disabled >
            </el-input>
            </el-form-item>
            <el-form-item >
              <el-input
                v-model="dialogData.itemInfo.quoteDate"
                placeholder="报价时间"
                disabled>
            </el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="confirmApplyPrice">同意申请人的报价</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="我的报价" prop="jobAmt">
              <el-input-number style="width:100%" :max="10000000" :precision="2" :step="100" :min="0" v-model="dialogData.itemInfo.jobAmt" placeholder="我的报价" ></el-input-number>
            </el-form-item>
            <el-form-item >
              <el-input v-model="dialogData.itemInfo.jobDate" disabled placeholder="报价时间" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="btnLoading" @click="feedbackApplyPrice">回复报价</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { ref, reactive } from "vue";
  import { OptEnum } from "@/biz/eenum/appEnum";
  import { DialogParam } from "@/biz/interface/DialogType";
  import { getFlexjobSettleInfoApi } from "@/api/modules/cpyjob/flexjob"; 
  import { FlexJobSettleVo } from "@/biz/interface/FlexjobType";
  import { useHandleData } from "@/hooks/useHandleData";
  import { confirmApplyPriceApi, jobpuberTalkPriceApi } from "@/api/modules/cpyjob/flexjob";
  import { ElMessage, FormInstance } from "element-plus";

  //页面的数据
  interface flexjobAbnormalDialogOption extends DialogParam {
    //弹出表单的标题
    title: string;
    //当前的数据对象
    itemInfo: FlexJobSettleVo;
    //其它的数据都继续在这里加
  }
  //提交按钮，避免多次提交
  const btnLoading = ref(false);
  //弹出框的参数
  const dialogVisible = ref(false);
  //当前表单数据在这里初始化
  const dialogData = reactive<flexjobAbnormalDialogOption>({
    optType: OptEnum.UNKNOW,
    title: "",
    itemInfo: {}
  });
  
  // 接收父组件传过来的参数
  const acceptParams = (params: DialogParam): void => {
    dialogData.optType = params.optType;
    dialogData.rowData = params.rowData;
    // dialogData.title = getOptTitle(dialogData.optType);
  
    if (dialogData.rowData) {
      initItemInfo();
      getItemInfo(dialogData.rowData.id);
    }
  
    dialogVisible.value = true;
  };
  
  //初始化页面的数据
  const initItemInfo = (): void => {
    dialogData.itemInfo = { };
  };
  
  //获取当前数据的详情，直接调用接口获取数据
  const getItemInfo = async (id: string) => {
    if (id) {
      let { data } = await getFlexjobSettleInfoApi({ dealId:id });
      dialogData.itemInfo = data as unknown as FlexJobSettleVo;
    }
  };
  
  //数据较验
  const rules = reactive({
    jobAmt: [{ required: true, message: "项目金额不能为空", trigger: "blur" }]
  });
  
  // 同意申请人的报价
  const confirmApplyPrice = async ()=>{
    if(dialogData.itemInfo.quoteAmt){
        await useHandleData(confirmApplyPriceApi, { jobId:  dialogData.itemInfo.jobId, dealId: dialogData.itemInfo.id }, `确认同意申请人:${dialogData.itemInfo.quoteAmt}的价格`);
    }
  };

  const jobFormRef = ref<FormInstance>();
  // 回复报价人的报价
  const feedbackApplyPrice = ()=>{
    btnLoading.value = true;
    jobFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      if (dialogData.optType === OptEnum.CREATE || dialogData.optType === OptEnum.EDIT) {

        //提交数据
        // console.log("提交的数据", dialogData.itemInfo, dynamicTags.value);
        let res = await jobpuberTalkPriceApi({
          dealId: dialogData.itemInfo.id,
          jobId: dialogData.itemInfo.jobId,
          priceAmt: dialogData.itemInfo.jobAmt
        });
        if (res.data) {
          ElMessage.success({ message: `报价成功！` });
          //刷新列表数据
          emits("refresh-list");
          dialogVisible.value = false;
        }
      }
    } catch (error) {
      console.log("出现异常情况,", error);
    } finally {
      btnLoading.value = false;
    }
  });
  };

  //页面事件
  const emits = defineEmits(["refresh-list"]);

  //页面参数
  defineExpose({
    acceptParams
  });
  </script>
  <style scoped lang="scss"></style>
  